<template>
    <div>
        <div :class="{'active':isActive}">这是样式class绑定 对象{}的形式</div>
        <br/>
        <div :class="['active',isActive?'bold':'']">这是样式class绑定 数组语法[]的形式</div>
        <br/>
        <br/>
        <div class="active" :class="{'bold':isActive}">这是样式class绑定 class="active" 对象{}的形式</div>
        <div class="active" :class="[isActive?'bold':'']">这是样式class绑定 class="active" 数组语法[]的形式</div>

    </div>
</template>

<script>
    export default {
        name: 'vbind-class',
        data() {
            return {
                isActive: true
            }
        }
    }
</script>
<style scoped>
    .active {
        color: #ff4400;
        font-size: 20px;
    }

    .bold {
        font-weight: bold;
        font-size: 40px;
    }
</style>
